<template>
<div id="app">

    <body>

        <Header></Header>

        <section>
            <div class="mainwrapper">

                <!-- 侧边栏 -->
                <Sidebar></Sidebar>
                <!-- /侧边栏 -->

                <div class="mainpanel">
                    <div class="contentpanel">

                        <!-- 子组件页面 -->
                        <component :is="componentID"></component>


                    </div>
                    <!-- contentpanel -->
                </div>
                <!-- mainpanel -->
            </div>
            <!-- mainwrapper -->
        </section>

    </body>


</div>

</template>

<script>
import Index from '@/components/content/Index'
import Examinee_Info from '@/components/content/Examinee_Info'
import Ranking from '@/components/content/Ranking'
export default {
    name:'Home',
    data() {
        return {
            path_:'/index', //子组件路由
            componentID:'Index',  //组件
            path_rule:{
                '/index': 'Index',
                '/examinfo': 'Examinee_Info',
                '/ranking': "Ranking",
            },
        }
    },
    components:{
        Index:Index,
        Examinee_Info:Examinee_Info,
        Ranking:Ranking,
    },
    watch:{
        $route(){
            this.path_ = this.$route.params.pathMatch;   //获取路径切换时变幻的路径
            console.log(this.componentID);
            var choices_ = this.path_rule[this.path_];
            this.componentID = choices_;
        }
    },
    mounted(){
        this.path_ = this.$route.params.pathMatch;   //获取路径切换时变幻的路径
        if(this.path_=='' || this.path_=='/'){
            this.path_ = '/index';
        }
        console.log(this.componentID);
        var choices_ = this.path_rule[this.path_];
        this.componentID = choices_;

    }
        
}
</script>

<style>
   
</style>

